import React, { useState } from 'react';
import { UnorderedListOutlined, HomeOutlined, PicCenterOutlined, MenuUnfoldOutlined, MenuFoldOutlined, UserSwitchOutlined, AntDesignOutlined, BankOutlined, UserOutlined } from '@ant-design/icons';
import { Layout, Menu, theme, Radio, ConfigProvider, Button, Avatar } from 'antd';
const { Header, Content, Footer, Sider } = Layout;
import { useNavigate, Routes, Route } from 'react-router-dom'
function getItem(label, key, icon, children, type) { return { key, icon, children, label, type, }; }
import Home from './pages/workbench/home/home';
import NotFound from './pages/workbench/notFound/notFound';
import MenuDome from './pages/system/menu/menu';
import RoleDome from './pages/system/role/role';
import UserDome from './pages/system/user/user';
import dayjs from 'dayjs';
import zhCN from 'antd/locale/zh_CN';
import 'dayjs/locale/zh-cn';
dayjs.locale('en');

const items = [
    getItem('工作台', 'sub1', <UnorderedListOutlined />, [
        getItem('首页', '/home', <HomeOutlined />),
        getItem('测试页', '/notFound', <PicCenterOutlined />),
    ]),
    getItem('系统管理', 'sub2', <BankOutlined />, [
        getItem('角色管理', '/roleDome', <UserOutlined />),
        getItem('用户管理', '/userDome', <UserSwitchOutlined />),
        getItem('菜单管理', '/menuDome', <PicCenterOutlined />),
    ]),
];
const App = () => {
    const [collapsed, setCollapsed] = useState(false);
    const navigate = useNavigate()
    const {
        token: { colorBgContainer },
    } = theme.useToken();
    const onClick = (e) => {
        navigate(e.key, { replace: true })
    }
    const rootSubmenuKeys = ['sub1', 'sub2', 'sub4'];
    const [openKeys, setOpenKeys] = useState(['sub1']);
    const onOpenChange = (keys) => {
        const latestOpenKey = keys.find((key) => openKeys.indexOf(key) === -1);
        if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
            setOpenKeys(keys);
        } else {
            setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
        }
    };
    const [maRginLeft, setmaRginLeft] = useState(200)
    return (
        <ConfigProvider locale={zhCN}>
            <Layout>
                <Sider
                    // breakpoint="lg" 测试测试测试222
                    // collapsedWidth="0"测试测试111111
                    // breakpoint="lg" 测试测试测试
                    // collapsedWidth="0"测试测试
                    onBreakpoint={(broken) => {
                        console.log(broken);
                    }}
                    onCollapse={(collapsed, type) => {
                        console.log(collapsed, type);
                    }}
                    trigger={null}
                    collapsible collapsed={collapsed}
                    style={{
                        overflow: 'auto',
                        height: '100vh',
                        position: 'fixed',
                        left: 0,
                        top: 0,
                        bottom: 0,
                    }}
                >
                    <div className="demo-logo-vertical" />
                    <Menu
                        theme="dark"
                        mode="inline"
                        defaultSelectedKeys={['1']}
                        openKeys={openKeys}
                        onOpenChange={onOpenChange}
                        items={items}
                        onClick={onClick}
                    />
                </Sider>
                <Layout
                    className="site-layout"
                    style={{
                        marginLeft: maRginLeft,
                    }}
                >
                    <Header
                        style={{
                            padding: 0,
                            background: colorBgContainer,
                            position: 'fixed',
                            zIndex: 999,
                            width: '89%',
                            top: 0,
                            display: 'flex',
                            justifyContent: 'space-between',
                            alignItems: 'center'
                        }}
                    >
                        <Button
                            type="text"
                            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                            onClick={() => {
                                setCollapsed(!collapsed)
                                if (collapsed) {
                                    setmaRginLeft(200)
                                } else {
                                    setmaRginLeft(80)
                                }
                            }}
                            style={{
                                fontSize: '16px',
                                width: 64,
                                height: 64,
                            }}
                        />
                        <Avatar size={40} icon={<AntDesignOutlined />} style={{
                            marginRight: '20px',
                        }} />
                    </Header>
                    <Content
                        style={{
                            marginTop: '60px',
                            overflow: 'initial',
                        }}
                    >
                        <div
                            style={{
                                padding: 24,
                                // minHeight: 360,
                                background: colorBgContainer,
                            }}
                        >
                            <Routes>
                                <Route exact path="/home" element={<Home />} />
                                <Route exact path="/notFound" element={<NotFound />} />
                                <Route exact path="/roleDome" element={<RoleDome />} />
                                <Route exact path="/userDome" element={<UserDome />} />
                                <Route exact path="/menuDome" element={<MenuDome />} />
                            </Routes>
                        </div>

                    </Content>

                </Layout>
            </Layout>
        </ConfigProvider>

    );
};
export default App;